<!--前端显示页面，使用了Bootstrap框架，通过外部引入的方式来添加bootstrap的css和js，因此需要使用网络才能体现出前端样式，样式效果图如外截图所示-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Learn By Doing</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
    <script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 导航栏 start -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">མིང་མཛོད་རྒྱ་མཚོ།</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">So nice</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">སློབ་སྦྱོང་བཟང་པོ།</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 导航栏 end -->
    <div class="container">
        <div class="col-sm-12">
            <!-- 左边输入内容区 start-->
            <div class="col-sm-6">
                <div class="panel panel-info">
                    <div class="panel-heading" style="text-align: center;font-size: 20px;">
                        <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span>བསྒྱུར་བྱའི་ནང་དོན།
                    </div>
                    <div class="panel-body" style="height: 300px;">
                        <div id="content" class="form-control" contenteditable="true" style="width: 100%;height:100%; font-size: 20px;" oninput="Get_translate();">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 左边输入内容区 end -->
            <!-- 右边翻译显示区 start -->
            <div class="col-sm-6">
                <div class="panel panel-success">
                    <div class="panel-heading" style="text-align: center; font-size: 20px;">
                        འགྲེལ་བའི་ནང་དོན།
                    </div>
                    <div class="panel-body" style="height: 300px;">
                        <div id="explain" style="width: 100%;height:100%; font-size: 20px;">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边翻译显示区 end -->
            <!-- 翻译按钮 start -->
            <div>
                <div class="col-sm-6">
                    <!-- Indicates a successful or positive action -->
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">（སྒྱུར་བ།）ཐག་གཅོད།</button>
                </div>
            </div>
            <!-- 翻译按钮 end -->
        </div>
        <p class="bg-primary">...</p>
    </div>
    <script type="text/javascript">
    // PHP 后端交互所用到的
    function Get_translate() {
        //得到要翻译的内容
        $content = $("#content").text();
        $.ajax({
            type: 'post',
            url: 'Getcontent.php',
            data: {
                'content': $content,
            },
            dataType: 'json',
            success: function(data) {
                $("#explain").html('');
                $("#explain").append("翻译：" + data.translation + "<br/>");
                if (data.basic['explains'] != null) {
                    $("#explain").append("释义：" + "<br/> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;");
                    for (var i = 0; i < data.basic['explains'].length; i++) {
                        $("#explain").append(data.basic['explains'][i] + "<br/> &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;");
                    }
                }
            }
        });
    }
    </script>
</body>

</html>
